import React, { useState } from "react";
import "./index.scss";

// 处理从服务器端获取到的数据（orders）
const dataFormat = (order, len) => {
  let obj = {};
  for (let i = 1; i <= len; i++) {
    obj[i] = 0;
  }

  // 判断传入的参数是否有效
  if (order) {
    Object.keys(order).forEach((key) => {
      // key：订单名称
      console.log(key);
      // 当前订单的详情
      console.log(order[key]);
      Object.keys(order[key]).forEach((item) => {
        obj[item] += order[key][item];
      });
    });
  }
  return obj;
};

function Pay() {
  const [pocket, setPocket] = useState({
    isShowPocket: false,
  });

  // 实现点击按钮，控制元素的显示与隐藏
  const handleClickPocket = () => {
    setPocket((prevState) => ({
      isShowPocket: !prevState.isShowPocket,
    }));
  };

  return (
    <div className="order-pay">
      <div className="order-pay-pocket">
        <div
          className={
            pocket.isShowPocket
              ? "order-pay-list order-pay-show"
              : "order-pay-list order-pay-hide"
          }
        >
          <div className="order-pay-food-detail">
            <h4 className="username">username</h4>
            <b className="price">￥{123 + 456}</b>
            <ul className="food-list">
              <li>11111</li>
              <li>22222</li>
              <li>33333</li>
            </ul>
          </div>
        </div>
        <i onClick={handleClickPocket}>
          <img
            src="http://xiaozhu.run/static/media/order.ef866849.svg"
            alt="购物车"
          />
          <span>{123 + 456}</span>
        </i>
      </div>

      <div className="order-pay-total">￥{123 + 456}</div>

      <div className="order-pay-btn">
        <button>去结算</button>
      </div>
    </div>
  );
}

export default Pay;
